<template>
	<view class="kui-toast kui-fixed kui-inset-l-0 kui-inset-t-0 kui-w-full kui-h-full kui-flex " :style="overlayStyle" v-show="show">
		<view class="kui-h-full1 kui-w-full kui-flex kui-flex-col kui-items-center" :class="[center ? 'kui-justify-center' : 'kui-justify-end']">
			<view class="kui-flex kui-flex-col kui-justify-center kui-items-center" :style="rootStyle">
				<!-- 标题 -->
				<view class="kui-mb-1"  v-if="title">
					<kui-text :size="`${32}rpx`">{{ title }}</kui-text>
				</view>
				<!-- 图标 -->
				<view class="kui-mb-1" v-if="type !== 'normal'">
					<kui-icons :size="theme.size.fonts['2xl']" :color="theme.colors['light']['grey'][0]" :type="getIconType(type)" v-if="type !== 'loading'"></kui-icons>
					<kui-animation name="rotate-center" :duration="1" runing infinite v-else>
						<kui-icons :size="theme.size.fonts['2xl']" :color="theme.colors['light']['grey'][0]" :type="getIconType(type)"></kui-icons>
					</kui-animation>
				</view>
				<view class="kui-mb-1" v-if="icon">
					<kui-icons :size="theme.size.fonts['2xl']" :color="theme.colors['light']['grey'][0]" :type="icon"></kui-icons>
				</view>
				<view :style="{
					fontSize: `${theme.size.fonts[contentSize]}rpx`
				}">
					<text>{{ content }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		watch,
		computed,
		getCurrentInstance,
		CSSProperties,
		defineComponent,
		SetupContext
	} from 'vue';
	
	import ToastProps from './props';
	
	const name = 'kui-toast';
	
	export default defineComponent({
		name,
		props: ToastProps,
		emits: ['update:show', 'closed'],
		setup(props, context: SetupContext) {
			let timer: null | any = null;
			
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;
			
			const overlayStyle = computed(() => {
				const style: CSSProperties = reactive({});
				
				if (!props.overlay) {
					style.pointerEvents = 'none';
				}
				
				return style;
			});
			
			const rootStyle = computed(() => {
				const style: CSSProperties = reactive({});
				
				style.minWidth = '40%';
				style.maxWidth = '60%';
				// style.height = '0px';
				style.padding = '30rpx 60rpx';
				style.backgroundColor = `rgba(0,0,0,0.8)`;
				style.color = theme.colors['light']['grey'][0];
				style.zIndex = 99;
				style.borderRadius = `${theme.size.radiusSize.base}rpx`;
				
				if (!props.center) {
					style.marginBottom = props.bottom;
				}
				
				return style;
			})
			
			const getIconType = (type: string) => {
				let name;
				if (type === 'success') {
					name = 'check_circle_outline';
				} else if (type === 'danger') {
					name = 'highlight_remove';
				} else if (type === 'warning') {
					name = 'info_outline';
				} else if (type === 'loading') {
					name = 'spinner6';
				}
				
				return name;
			}
			
			const clearTimer = () => {
				if (timer) {
					clearTimeout(timer);
					timer = null;
				}
			}
			
			const hide = () => {
				setTimeout(() => {
					context.emit('update:show', false);
					context.emit('closed');
				}, 200);
			}
			
			const show = () => {
				clearTimer();
				if (props.duration) {
					timer = setTimeout(() => {
						hide();
					}, props.duration);
				}
			}
			
			watch(
				() => [props.show],
				(newVal) => {
					if (newVal[0]) {
						show();
					}
				}
			);
			
			return {
				overlayStyle,
				rootStyle,
				theme,
				getIconType
			}
		}
	});
</script>

<style>

</style>